/*
 * 注册页面
 */
document.ready(function () {

    // !1.0处理验证码的函数
    const CaptchaMini = require("../lib/captcha/captcha-mini");

    // 引入css
    require("../css/register.css");

    // 引入验证码的函数
    require("../lib/captcha/captcha-mini");

    // 初始化验证码的功能
    let captcha1 = new CaptchaMini({
        // 验证码的长度
        length: 5,
        // 线段的数量
        lineNum: 6,
        // 点的数量
        dotNum: 10
    })

    // 声明一个变量来保存验证码 用于后面的请求
    let code = null;
    captcha1.draw(document.querySelector("#captcha"), r => {
        code = r;
        console.log("验证码：", code);
    })

    // !2.0表单验证
    // 获取所有表单元素
    let phone = document.querySelector("#phone");
    let verify = document.querySelector("#verify");
    let pwd1 = document.querySelector("#pwd1");
    let pwd2 = document.querySelector("#pwd2");
    let btn = document.querySelector(".btn");

    let phoneFlag = false;
    let verifyFlag = false;
    let pwd1Flag = false;
    let pwd2Flag = false;

    // 非空验证
    function checkEmpty(a, o, str) {
        o.addEventListener("blur", function () {

            // 判断用户是否输入内容 内容为空 //!显示警告 并结束函数
            if (o.value.trim() == "") {
                this.style.borderColor = "red";
                o.value = '';
                console.log(str);
                o.parentNode.nextElementSibling.innerHTML = "内容不能为空！"
                return;
            }
            // 当验证的是账号的时候 验证格式是否正确 最后保留验证结果
            if (a === "userId") {
                //todo 获取正则验证的结果
                phoneFlag = $check.checkPhone(o.value);
                // console.log("手机号的验证结果是：", phoneFlag);
                if (phoneFlag) {
                    this.style.borderColor = "green";
                    o.parentNode.nextElementSibling.innerHTML = "";
                } else {
                    this.style.borderColor = "red";
                    console.log(123);
                    o.parentNode.nextElementSibling.innerHTML = "请输入正确的手机号码！";
                }
                // 当验证的是密码的时候 验证格式是否正确 最后保留验证结果
                // 并验证两次密码是否输入一致
            } else if (a === "pwd1") {
                //todo 获取正则验证的结果
                pwd1Flag = $check.checkPwd(o.value)
                if (pwd1Flag) {
                    this.style.borderColor = "green";
                    o.parentNode.nextElementSibling.innerHTML = "";
                    if (pwd2.value) {
                        if (pwd1.value != pwd2.value) {
                            this.style.borderColor = "red";
                            pwd1Flag = false;
                            o.parentNode.nextElementSibling.innerHTML = "两次输入的密码不一样！";

                        } else {
                            this.style.borderColor = "green";
                            pwd2.style.borderColor = "green";
                            o.parentNode.nextElementSibling.innerHTML = "";
                            pwd2.parentNode.nextElementSibling.innerHTML = "";
                        }
                    }
                } else {
                    this.style.borderColor = "red";
                    o.parentNode.nextElementSibling.innerHTML = "密码为6-15的 字母 数字 下划线";
                }

                // console.log("密码1的验证结果是：", pwd1Flag);
                // 当验证的是密码的时候 验证格式是否正确 最后保留验证结果
                // 并验证两次密码是否输入一致
            } else if (a === "pwd2") {
                pwd2Flag = $check.checkPwd(o.value)
                if (pwd2Flag) {
                    this.style.borderColor = "green";
                    o.parentNode.nextElementSibling.innerHTML = "";
                    if (pwd1.value) {
                        if (pwd1.value != pwd2.value) {
                            this.style.borderColor = "red";
                            pwd2Flag = false;
                            o.parentNode.nextElementSibling.innerHTML = "两次输入的密码不一样！";

                        } else {
                            this.style.borderColor = "green";
                            pwd1.style.borderColor = "green";
                            o.parentNode.nextElementSibling.innerHTML = "";
                            pwd1.parentNode.nextElementSibling.innerHTML = "";
                        }
                    }
                } else {
                    this.style.borderColor = "red";
                    o.parentNode.nextElementSibling.innerHTML = "密码为6-15的 字母 数字 下划线";
                }

                // console.log("密码2的验证结果是：", pwd2Flag);
                // 当验证的是验证码时 判断输入是否正确
            } else if (a === "verify") {
                if (o.value == code) {
                    verifyFlag = true;
                    this.style.borderColor = "green";
                    o.parentNode.nextElementSibling.innerHTML = "";
                } else {
                    this.style.borderColor = "red";
                    o.parentNode.nextElementSibling.innerHTML = "验证码不一样！";
                }
            }
        })
    }

    checkEmpty("userId", phone, "手机账号不能为空！")
    checkEmpty("pwd1", pwd1, "密码不能为空！")
    checkEmpty("pwd2", pwd2, "密码不能为空！")
    checkEmpty("verify", verify, "验证码不能为空！")

    // 点击注册后 激活所有输入框的事件来获取判断结果 //!都通过就跳转
    btn.addEventListener("click", function () {
        phone.focus();
        phone.blur();
        verify.focus();
        verify.blur()
        pwd1.focus();
        pwd1.blur();
        pwd2.focus();
        pwd2.blur();
        if (phoneFlag && verifyFlag && pwd1Flag && pwd2Flag) {
            // 发送请求注册 成功就跳转到登录
            window.$http.post("/users/add", {
                account: phone.value,
                password: pwd1.value
            }, function (res) {
                // 成功
                if (res.status === 0) {
                    // 注册成功后 延迟2s后跳转
                    // 提示框
                    window.$check.toast(res.status, res.msg, function () {
                        window.location.href = "login.html";
                    });
                    // 处理错误
                } else {
                    window.$check.toast(res.status, res.msg);
                }


            })
        }
    })
})
